前言

今天來介紹一款十分簡便又輕巧的設計工具, Adobe XD!!(登~登~
其實一直以來我出圖不論是wireframe或是mockup, 都是用fireworks

Fireworks , Flash, Dreamweaver 為Macromidea網頁製作三巨頭 (莫約20年前... 時代的眼淚呀...)
風光之際被Abode巨資收購, 然後...就一個個陣亡了... 然後... 就沒有然後了...

在XD面世之前, 市面上還是有許多此類的繪圖軟體, 而A家的死忠使用們習慣是使用photoshop來出設計稿
photoshop拿來作為網頁設計的工具, 著實有很多地方令人詬病, 上手難度也高
直到XD橫空出世!!

下載安裝

Adobe XD 本身是免費的 (目前), 大家可以到官網畫面最下方直接點擊下載即可, 忘記要不要綁帳號了, 沒有A家帳號的可能要先註冊一下
安裝流程就是一直下一步就對了, 這邊姑且不再贅述

Hello XD

安裝好之後我們打開程式,

接著點選右方的面板, 可以選擇你要繪製的畫布大小, 這邊先隨意選就好
在XD中實際上一個檔案裡的畫布是可以無限多的, 你實際作業的檔案可能是長這樣

先隨意選個we 1920, 接著我們進入作業區
可以發現整個XD非常的簡潔, 工具列上什麼都沒有只有ㄧ些最基本的工具

習慣其他軟體的同學, 第一次打開是不是內心真的很XD呢
就這樣!! 沒了!! 下課(拖走

接著讓我們開始, 首先來畫個Banner/Slider
直接把你要的圖片拖曳進畫面裡, 如果圖片不是你要的大小怎麼辦呢
使用工具列上的幾合圖形工具(看你要啥形狀的), 直接畫出你要的大小, 然後Shift+Ctrl+M ! (登~~~登~
他會把幾合圖形當成遮罩使用(前後排序不拘), 效果如下

接著我們在上面放一些選單連結, 只放連結太單調了, 前面加個icon好了
如果手上沒有icon素材的同學, 可以在選單>插件 裡面尋找插件來安裝, 這邊推薦icon 4 design

只要打關鍵字就可以直接陳列插件裡的icon點擊即可直接插入, 非常的方便

接著選單不會只有一個吧, 讓我們複製並貼上*6

錯!!
XD有一個特色功能就是在處理這些重複又重複又重複的元件
我們把ICON+文字一起選取, 接著點擊右上的"重複網格"按鈕(Ctrl+R)他就會變成這樣

接著再把他邊框的綠線往左或往下拖曳

是不是很HIGH!!!是不是很方便!! HIGH起來呀各位!!

抱歉我失態了...
不過就光這個功能就足夠把我從其他軟體騙過來了 (真好騙...
有興趣的同學可以先把軟體下載安裝, 順便摸一摸

下一堂我們再接著講AdobeXD更多強大之處.